<template>
  <div class="flex flex-col h-full">
    <SearchContainer is-width @search="getData" @reset="onReset">
      <a-form ref="formRef" class="form-style-flex" :model="formState" :label-col="{ style: { width: '78px' } }">
        <a-form-item name="pyjm" class="w-[250px]">
          <a-input v-model:value="formState.pyjm" placeholder="姓名/助记码/手机号/卡号/身份证号" />
        </a-form-item>
      </a-form>
    </SearchContainer>
    <a-card class="mt-2 flex-1">
      <a-button type="primary" class="mb-2 mr-2" @click="onClickAdd()">建档</a-button>
      <BaseExport type="门诊" name="患者档案" code="00001135" :search-params="formState">导出</BaseExport>
      <BaseTable :loading="loading" column-code="000501" fill :scroll="{ x: 2600 }" :data-source="tableData" bordered :pagination="pagination">
        <template #bodyCell="{ column, index, record }">
          <template v-if="column.dataIndex == 'xh'">
            {{ index + 1 }}
          </template>
          <template v-if="column.dataIndex === 'brName'">
            <PopoverInfo :patient-info="record">
              <div class="cursor-pointer text-primary hover:underline">{{ record.brName }}</div>
            </PopoverInfo>
          </template>
          <template v-if="column.dataIndex == 'brYwyName'">
            {{ record.brYwyName || record.brYwy }}
          </template>
          <template v-if="column.dataIndex === 'action'">
            <a-button v-authority type="link" size="small" @click="onClickAdd(record)"> 修改 </a-button>
            <a-button type="link" size="small" @click="onClickRegister(record)"> 登记 </a-button>
          </template>
        </template>
      </BaseTable>
    </a-card>
    <FilesAdd v-model:open="editOpen" :row-data="rowData" is-save @success="onSuccess" />
    <RegisterModal v-model:open="registerOpen" :row-data="rowData" title="挂号" @success="onSuccess" />
  </div>
</template>
<script setup>
// import { getSystemConfig } from '@/utils/systemConfig'
import { useRouter } from 'vue-router'
import RegisterModal from '@/components/RegisterModal'
import FilesAdd from '../components/FilesAdd'
import PopoverInfo from './components/PopoverInfo'

// const route = useRoute()
const router = useRouter()
const rowData = ref({})
const editOpen = ref(false)
const registerOpen = ref(false)
const formRef = ref(null)
const formState = ref({
  brId: '',
  brMob: '',
  brName: '',
  brSfz: '',
  pyjm: '',
  ofAll: 1,
  khly: [],
  dateRange: []
})

const onClickAdd = (row = {}) => {
  rowData.value = { ...row }
  editOpen.value = true
}

const onClickRegister = (row) => {
  router.push({
    path: '/army/workstation',
    query: {
      brId: row.brId
    }
  })
}
const { loading, tableData, pagination, getData } = useTable({
  url: '/outp/mzdj/getPatientInfoList',
  params: formState.value,
  immediate: true,
  formatParams: (params) => {
    return {
      ...params,
      createTimeStdate: params.dateRange?.[0],
      createTimeEddate: params.dateRange?.[1]
    }
  },
  onSuccess: () => {
    tableData.value.forEach((item) => (item.openPopover = false))
  }
})

const onReset = () => {
  formRef.value.resetFields()
  formState.value.brGzxm = []
  formState.value.khly = []
}

const onSuccess = () => {
  rowData.value = {}
  getData()
}
</script>
